<template>
	<div class="mt-2 px-1">
		<betting-amount class="text-t-3" labelT="betting.betAmount" :value="data.stake" />
		<betting-amount
			v-if="data.outcome"
			class="text-t-3"
			labelT="betting.winAmount"
			:value="data.maxReturn"
			isPayout />
		<betting-amount
			v-else
			class="text-t-3"
			labelT="betting.awardAmount"
			:value="data.potentialMaxReturn"
			isPayout />
	</div>
</template>

<script lang="ts" setup>
import BettingAmount from '../betting-amount/index.vue'
import { PropType } from 'vue'
import { FeedType, BetType } from '@/types'
defineProps({
	data: {
		type: Object as PropType<FeedType | BetType>,
		required: true
	}
})
</script>
